﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0" />
    <title>html5 audio音频播放</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="headDiv">
        <img src="images/logo.jpg" style="height: 100%;" alt="" />
    </div>
    <div class="container">
        <div class="row">
            <img src="images/banner.jpg" style="width:100%;" alt="" />
        </div>
        <div class="row about">
            <p>
                <b style="font-size: 20px;">2013年</b>，在上海书展期间，隆重推出的第三届上海国际文学周特意选择了落户在思南公馆内的FX505建筑内，从此思南文学之家诞生了。<br />
                思南文学之家的名牌由诺贝尔文学奖获得主莫言题写。每个周六的下午，思南读书会都在思南文学之家如约而至，在这古色的建筑中，一群人和一本书，通过分享继续延展着这里的故事。
            </p>
        </div>
        <div class=" row audioPanel">
            <div class="col-xs-3 col-sm-1">
                <div id="btnctrol" data-status="play">
                    <span class="glyphicon glyphicon-play"></span>
                </div>
            </div>
            <div class="col-xs-9 col-sm-11">
                <div id="audiotitle" class="col-xs-8 col-sm-8" style="padding-left: 0px;">
                    思南文学之家介绍
                </div>
                <div class="col-xs-4 col-sm-4">
                    <div class="row" style="text-align: right;">
                        <span id="currentTimeTxt">00:00</span>/<span id="allTimeTxt">00:00</span>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12" style="margin-top: 10px;">
                    <div class="row">
                        <audio id="zjaudio">
                            <h3>对不起，您的浏览器不支持音频播放。</h3>
                        </audio>
                        <div class="progressPanel">
                            <div id="progressDiv">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-6 text-center navdiv">
                <a href="#" class="aleft">上一主题名称</a>
            </div>
            <div class="col-xs-6 col-sm-6 text-center navdiv" style="background-color:#e0e0e0; border-left:1px solid #d0d0d0;">
                <a href="#" class="aright">下一主题名称</a>
            </div>
        </div>
    </div>
    <footer class="text-center footer">
        <img src="images/footer.jpg" alt="" style="max-width:100%;" />
    </footer>
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        var src = "demo.mp3";
        var zjaudio,cleartimeid;
        function Init() {
            zjaudio = document.getElementById("zjaudio");
            zjaudio.src = src;
            //注册事件
            //开始播放时触发
            zjaudio.addEventListener("play", function () {
                cleartimeid = setInterval(function () {
                    SetMusicTimeText(zjaudio.currentTime, "currentTimeTxt");
                    SetMusicTimeText(zjaudio.duration, "allTimeTxt");
                    $("#progressDiv").css("width", (zjaudio.currentTime / zjaudio.duration * 100) +"%");
                }, 100);
            },false);
            //暂停时触发
            zjaudio.addEventListener("pause", function () {
                clearInterval(cleartimeid);
            },false);
            //播放结束时触发
            zjaudio.addEventListener("ended", function () {
                clearInterval(cleartimeid);
                $("#btnctrol").children().first().removeClass("glyphicon-pause");
                $("#btnctrol").attr("data-status", "play");
                $("#progressDiv").css("width", "0%");
                SetMusicTimeText(0, "currentTimeTxt");
                SetMusicTimeText(0, "allTimeTxt");
            }, false);
        }
        //设置播放时间
        function SetMusicTimeText(time, timePlace) {//默认获取的时间是时间戳改成我们常见的时间格式
            //分钟
            var minute = time / 60;
            var minutes = parseInt(minute);
            if (minutes < 10) {
                minutes = "0" + minutes;
            }
            //秒
            var second = time % 60;
            seconds = parseInt(second);
            if (seconds < 10) {
                seconds = "0" + seconds;
            }
            var allTime = "" + minutes + "" + ":" + "" + seconds + ""
            $("#" + timePlace).html(allTime);
        }

        $(function () {
            Init();
            $("#btnctrol").click(function () {
                var status = $(this).attr("data-status");
                if (status == "play") {
                    $(this).children().first().addClass("glyphicon-pause");
                    $(this).attr("data-status", "pause");
                    zjaudio.play();
                }
                else {
                    $(this).children().first().removeClass("glyphicon-pause");
                    $(this).attr("data-status", "play");
                    zjaudio.pause();
                }
            });
        });
    </script>
</body>
</html>
